<template>
  <div v-if="type === 'model'">
    <h3 class="marginBtm title">模板信息</h3>
    <template-detail :exportJson="exportJson"></template-detail>
    <h3 class="marginBtm title" style="margin-top: 25px">模板上传</h3>
    <div class="marginTop">
      <input style="font-size: 16px; width: 100%" type="file" @change="uploadExcel" :disabled="type !== 'model'" />
    </div>
    <a-descriptions bordered size="small" :column="1" :title="exportJson.lwmc" class="marginTop">
      <a-descriptions-item label="初始化区域">
        <span style="width: 100px; display: inline-block; vertical-aligin: middle"
          >A/1 -
          {{
            exportJson.zzb != null && exportJson.zzb - 0 >= 0
              ? columnFilter(exportJson.zzb)
              : coordinate.zzb != null && coordinate.zzb - 0 >= 0
              ? columnFilter(coordinate.zzb)
              : ''
          }}/{{
            exportJson.hzb != null && exportJson.hzb - 0 >= 0
              ? exportJson.hzb - 0 + 1
              : coordinate.hzb != null && coordinate.hzb - 0 >= 0
              ? coordinate.hzb - 0 + 1
              : ''
          }}</span
        >
        <a-tooltip>
          <template slot="title">选中一个单元格作为结束坐标</template>
          <a-button
            type="primary"
            @click="setInitRange"
            :disabled="!(coordinate.hzb != null && coordinate.hzb - 0 >= 0)"
          >
            设置初始化区域
          </a-button>
        </a-tooltip>
      </a-descriptions-item>
    </a-descriptions>
    <p class="marginTop" style="color: #1890ff">
      初始化起始坐标A1，选中一个单元格作为结束坐标，两点矩形区域以外内容将被删除，删除部分不能与初始化区域有关联公式！
    </p>
    <p>设置初始化区域后才能保存</p>
    <div class="marginTop">
      <a-tooltip>
        <template slot="title">设置初始化区域后才能保存</template>
        <a-button type="primary" :disabled="!(exportJson.hzb != null && exportJson.hzb - 0 >= 0)" @click="saveModel"
          >保存模板</a-button
        >
      </a-tooltip>
      <a-button type="primary" class="marginLeft" @click="downloadExcel">下载模板</a-button>
    </div>
  </div>
</template>

<script>
import TemplateDetail from './TemplateDetail.vue'

export default {
  name: 'ModelTemplate',
  components: { TemplateDetail },
  props: {
    //表单禁用
    exportJson: {
      type: Object,
      default: false,
      required: false,
    },
    coordinate: {
      type: Object,
      default: false,
      required: false,
    },
    type: {
      type: String,
      default: false,
      required: false,
    },
    en: {
      type: Array,
      default: false,
      required: false,
    },
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {
    // 上传
    uploadExcel(evt) {
      this.$emit('uploadExcel', evt)
    },
    setInitRange(evt) {
      this.$emit('setInitRange')
    },
    saveModel(evt) {
      this.$emit('saveModel')
    },
    downloadExcel(evt) {
      this.$emit('downloadExcel')
    },
    // 列计算A-ZZ
    columnFilter(num) {
      if (typeof num === 'number') {
        let str = ''
        if (num / 26 >= 1) {
          str = this.en[Math.floor(num / 26 - 1)]
        }
        return str + this.en[num % 26]
      }
      return ''
    },
    // 列反向计算
    unColumnFilter(c) {
      if (c === c.toUpperCase()) {
        let str = 0
        c.split('').map((item, index) => {
          str = str + this.en.indexOf(item) + index * this.en.length
        })
        return str
      }
      return null
    },
  },
}
</script>
<style lang="less" scoped>
.marginTop {
  margin-top: 15px;
}
.marginLeft {
  margin-left: 15px;
}
.marginBtm {
  margin-bottom: 15px;
}
.title {
  padding-bottom: 10px;
  border-bottom: 1px solid #adadad;
}
</style>